import { ProCard } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, Cascader, Col, DatePicker, Row, Skeleton } from 'antd';
import moment from 'moment';
import { useState } from 'react';
import { useAccess } from 'umi';
import TrendCuesColumnCard from './components/TrendCuesColumnCard';
import TrendCuesRankCard from './components/TrendCuesRankCard';

//排行榜筛选项
const organizationTopIdOptions = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '6000000000100000',
    label: '市委宣传部',
  },
  {
    value: '6000000000200000',
    label: '中央媒体',
  },
  {
    value: '6000000000300000',
    label: '市属媒体',
  },
  {
    value: '6000000000400000',
    label: '市外媒体',
  },

  {
    value: '6000000000700000',
    label: '市级部门',
  },
  {
    value: '6000000000900000',
    label: '区县',
  },
  //没有排行
  {
    value: '6000000001400000',
    label: '社会团体',
  },
  {
    value: '6000000001700000',
    label: '高等院校',
  },
  {
    value: '6000000001600000',
    label: '央企或在渝大型企业',
  },
  {
    value: '6000000002100000',
    label: '国有企业',
  },
  {
    value: '6000000003000000',
    label: '其他',
  },
];

interface TrendCardProps {}

const TrendCard: React.FC<TrendCardProps> = ({}) => {
  const access = useAccess();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const monthFormat = 'YYYY-MM-DD';
  const startDate = moment().startOf('month');
  const endOfDate = moment();

  //线索报送量、线索收录量
  const [dataTabType, setDataTabState] = useState<string>('1');

  //选择单位类型
  const [dataOrganizationTopName, setDataOrganizationTopNameState] = useState<string>(
    organizationTopIdOptions[0].label,
  );
  const [dataOrganizationTopId, setDataOrganizationTopIdState] = useState<string>(
    organizationTopIdOptions[0].value,
  );

  //日期范围
  const [dataDates, setDataDatesState] = useState<string[]>([
    startDate.format(monthFormat),
    endOfDate.format(monthFormat),
  ]);

  return (
    <>
      {window.innerWidth < 400 ? (
        <></>
      ) : (
        <Skeleton avatar title={false} loading={false} active>
          <Card
            style={{ width: '100%', marginTop: '24px' }}
            title={false}
            tabList={[
              {
                tab: `选题计划`,
                key: '1',
              },
              {
                tab: `报送选题`,
                key: '2',
              },
              {
                tab: `主动报送`,
                key: '3',
              },
            ]}
            onTabChange={(key) => {
              setDataTabState(key);
            }}
            tabBarExtraContent={
              <>
                <span style={{ marginRight: 20 }}>
                  &nbsp;
                  {access.线索征集x配置x管理员 ? (
                    <Cascader
                      defaultValue={[dataOrganizationTopId]}
                      options={organizationTopIdOptions}
                      onChange={(value: any[], selectOptions: any) => {
                        setDataOrganizationTopIdState(value[value.length - 1]);
                        setDataOrganizationTopNameState(
                          selectOptions.map((item: { label: any }) => item.label).join(' > '),
                        );
                      }}
                    >
                      <a>{dataOrganizationTopName}</a>
                    </Cascader>
                  ) : (
                    <></>
                  )}
                </span>
                <DatePicker.RangePicker
                  popupStyle={{ width: 400 }}
                  style={{ width: 230 }}
                  allowClear={false}
                  defaultValue={[startDate, endOfDate]}
                  format={monthFormat}
                  disabledDate={(current) => {
                    return current && current > moment().endOf('day');
                  }}
                  onChange={(values, dates) => {
                    setDataDatesState(dates);
                  }}
                  ranges={{
                    今日: [moment(), moment()],
                    本月: [moment().startOf('month'), moment().endOf('month')],
                    上月: [
                      moment().startOf('month').subtract(1, 'months'),
                      moment().endOf('month').subtract(1, 'months'),
                    ],
                    最近7天: [moment().subtract(6, 'days'), moment()],
                    最近60天: [moment().subtract(59, 'days'), moment()],
                    最近90天: [moment().subtract(89, 'days'), moment()],
                  }}
                />
              </>
            }
            bodyStyle={{
              paddingTop: 0,
            }}
          >
            <Row
              style={{
                marginTop: 5,
              }}
            >
              {currentUser?.organizationTopId === '6000000001400000' ||
              currentUser?.organizationTopId === '6000000001700000' ||
              currentUser?.organizationTopId === '6000000001600000' ||
              currentUser?.organizationTopId === '6000000002100000' ||
              currentUser?.organizationTopId === '6000000003000000' ? (
                <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                  <ProCard>
                    <TrendCuesColumnCard
                      type={dataTabType}
                      organizationTopId={dataOrganizationTopId}
                    />
                  </ProCard>
                </Col>
              ) : (
                <Col xl={15} lg={12} md={12} sm={24} xs={24}>
                  <ProCard>
                    <TrendCuesColumnCard
                      type={dataTabType}
                      organizationTopId={dataOrganizationTopId}
                    />
                  </ProCard>
                </Col>
              )}
              {currentUser?.organizationTopId === '6000000001400000' ||
              currentUser?.organizationTopId === '6000000001700000' ||
              currentUser?.organizationTopId === '6000000001600000' ||
              currentUser?.organizationTopId === '6000000002100000' ||
              currentUser?.organizationTopId === '6000000003000000' ? (
                <></>
              ) : (
                <Col xl={9} lg={12} md={12} sm={24} xs={24}>
                  <ProCard>
                    <TrendCuesRankCard
                      type={dataTabType}
                      organizationTopId={dataOrganizationTopId}
                      dates={dataDates}
                    />
                  </ProCard>
                </Col>
              )}
            </Row>
          </Card>
        </Skeleton>
      )}
    </>
  );
};

export default TrendCard;
